import 'package:flutter/material.dart';

class CustomRadioGroup<T> extends StatelessWidget {
  final List<RadioOption<T>> options;
  final T? selectedValue;
  final ValueChanged<T?>? onChanged;
  final Axis direction;
  final MainAxisAlignment mainAxisAlignment;
  final CrossAxisAlignment crossAxisAlignment;

  const CustomRadioGroup({
    super.key,
    required this.options,
    this.selectedValue,
    this.onChanged,
    this.direction = Axis.horizontal,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.crossAxisAlignment = CrossAxisAlignment.center,
  });

  @override
  Widget build(BuildContext context) {
    if (direction == Axis.horizontal) {
      return Row(
        mainAxisAlignment: mainAxisAlignment,
        crossAxisAlignment: crossAxisAlignment,
        children: _buildRadioWidgets(),
      );
    } else {
      return Column(
        mainAxisAlignment: mainAxisAlignment,
        crossAxisAlignment: crossAxisAlignment,
        children: _buildRadioWidgets(),
      );
    }
  }

  List<Widget> _buildRadioWidgets() {
    return options.map((option) {
      return Flexible(
        child: InkWell(
          onTap: () => onChanged?.call(option.value),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Radio<T>(
                value: option.value,
                groupValue: selectedValue,
                onChanged: onChanged,
              ),
              if (option.label != null)
                Flexible(
                  child: Text(
                    option.label!,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
            ],
          ),
        ),
      );
    }).toList();
  }
}

class RadioOption<T> {
  final T value;
  final String? label;
  final Widget? widget;

  const RadioOption({
    required this.value,
    this.label,
    this.widget,
  });
}

// 使用示例
class CustomRadioGroupExample extends StatefulWidget {
  const CustomRadioGroupExample({super.key});

  @override
  State<CustomRadioGroupExample> createState() => _CustomRadioGroupExampleState();
}

class _CustomRadioGroupExampleState extends State<CustomRadioGroupExample> {
  String? selectedGender = '男';
  String? selectedStatus = '正常';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('自定义RadioGroup')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '性别选择:',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            CustomRadioGroup<String>(
              options: [
                RadioOption(value: '男', label: '男'),
                RadioOption(value: '女', label: '女'),
                RadioOption(value: '其他', label: '其他'),
              ],
              selectedValue: selectedGender,
              onChanged: (value) {
                setState(() {
                  selectedGender = value;
                });
              },
              direction: Axis.horizontal,
            ),
            
            SizedBox(height: 24),
            
            Text(
              '状态选择:',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            CustomRadioGroup<String>(
              options: [
                RadioOption(value: '正常', label: '正常'),
                RadioOption(value: '异常', label: '异常'),
                RadioOption(value: '待定', label: '待定'),
              ],
              selectedValue: selectedStatus,
              onChanged: (value) {
                setState(() {
                  selectedStatus = value;
                });
              },
              direction: Axis.horizontal,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            ),
            
            SizedBox(height: 24),
            
            // 垂直布局示例
            Text(
              '垂直布局示例:',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            CustomRadioGroup<String>(
              options: [
                RadioOption(value: '选项1', label: '这是一个很长的选项1'),
                RadioOption(value: '选项2', label: '这是一个很长的选项2'),
                RadioOption(value: '选项3', label: '这是一个很长的选项3'),
              ],
              selectedValue: selectedStatus,
              onChanged: (value) {
                setState(() {
                  selectedStatus = value;
                });
              },
              direction: Axis.vertical,
            ),
            
            SizedBox(height: 24),
            
            // 显示当前选择
            Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.blue.shade50,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.blue.shade200),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('当前选择:'),
                  Text('性别: ${selectedGender ?? '未选择'}'),
                  Text('状态: ${selectedStatus ?? '未选择'}'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}